<template>
  <div class="main">
    <!-- 头部介绍 -->
    <div class="outer">
      <div class="one">
        <!-- 位置信息 -->
        <div class="oneyi">当前位置</div>
        <div class="oneone">
          <!-- 左侧图片 -->
          <div class="oneer">
            <img src="../assets/img/petxf.jpg" alt="" />
            <div class="onesan">
              <img src="../assets/img/head-pic1.png" alt="" />
            </div>
          </div>
          <!-- 右侧图片 -->
          <div class="onesi" v-if="headData">
            <div class="onewu">
              <div class="oneliu">
                <h3>{{ headData[0].uintroduce }}</h3>
                <div class="oneqi">
                  <img src="../assets/img/strBanHtI01.png" alt="" />
                  <span>保证金</span>
                </div>
                <div class="oneba">
                  <img src="../assets/img/strBanHtI02.png" alt="" />
                  <span>平台认证</span>
                </div>
              </div>
              <div class="onejiu">
                <span>评分:</span>
                <el-rate
                  v-model="values"
                  show-score
                  text-color="#ff9900"
                  score-template="顾客评分:"
                >
                </el-rate>
                <span>{{ values }}.0</span>
              </div>
            </div>
            <hr style="margin: 10px 0" />
            <div class="oneshi">
              <p>邮箱：{{ headData[0].uemail }}</p>
              <p>电话：{{ headData[0].uphone }}</p>
            </div>
            <div class="onesyi">
              <h3>宠物店简介</h3>
              <p>价格便宜，不虚假</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品分类 -->
    <div class="two">
      <el-tabs v-model="activeName">
        <el-tab-pane label="全部宠物" name="first">
          <el-tabs
            v-model="aName"
            @tab-click="aName == 'first' ? (typeid = 1) : (typeid = 2)"
          >
            <!-- 狗狗列表 -->
            <el-tab-pane label="宠物狗" name="first">
              <div class="twoyi">
                <!-- 分类 -->
                <div class="twoer">
                  <div class="twosan">
                    <h4>狗狗品种:</h4>
                    <div
                      class="twosi"
                      v-for="{ bid, type_id, breed_name } in petData"
                      :key="bid"
                    >
                      <!-- <a href="#" v-once>不限</a> -->
                      <a
                        href="#"
                        v-if="type_id == 1"
                        @click="name = breed_name"
                        >{{ breed_name }}</a
                      >
                    </div>
                  </div>
                  <div class="twowu" @click="ref">
                    <a style="color: rgb(255, 171, 79); font-size: 16px">
                      不限
                    </a>
                  </div>
                  <hr class="twoliu" />
                  <div class="twoqi">
                    <h4>出售价格:</h4>
                    <div class="twoba">
                      <a
                        style="color: rgb(255, 171, 79); font-size: 16px"
                        @click="price"
                        >不限</a
                      >
                      <a @click="(min = 0), (max = 1000), getNum()"
                        >1000元以下</a
                      >
                      <a @click="(min = 1000), (max = 2000), getNum()"
                        >1000-2000元</a
                      >
                      <a @click="(min = 2000), (max = 3000), getNum()"
                        >2000-3000元</a
                      >
                      <a @click="(min = 3000), (max = 10000000), getNum()"
                        >3000元以上</a
                      >
                      <input type="text" value="0" v-model="min" /> -
                      <input type="text" value="0" v-model="max" />
                      <span>元</span>
                      <button @click="getNum">确定</button>
                    </div>
                  </div>
                </div>
                <!-- 图片列表 -->
                <el-row :gutter="20">
                  <el-col :span="6" v-for="(item, i) in list" :key="i">
                    <div class="twojiu">
                      <div class="twoshi">
                        <a href="#">
                          <img :src="`/img1/${item.pimg}`" />
                        </a>
                      </div>
                      <div class="twosyi">
                        <div class="twoser">
                          <h4>{{ item.pname }}</h4>
                          <span>公</span>
                        </div>
                        <p class="twossan">{{ item.pdescribe }}</p>
                        <div class="twossi">
                          <div class="twoswu">{{ item.pgrade }}</div>
                          <div class="twosliu">{{ item.pbirthday | date }}</div>
                          <div class="twosqi">
                            {{
                              item.pet_insect_repellent == 1
                                ? "已驱虫"
                                : "未驱虫"
                            }}
                          </div>
                        </div>
                        <div class="twoers">
                          <h3>￥{{ item.price }}</h3>
                          <span>精品精宠</span>
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>

                <!-- 页码 -->
                <ul class="three">
                  <li>&lt;</li>
                  <li>1</li>
                  <li>2</li>
                  <li>3</li>
                  <li>4</li>
                  <li>&gt;</li>
                </ul>
              </div>
            </el-tab-pane>
            <!-- 猫列表 -->
            <el-tab-pane label="宠物猫" name="second">
              <div class="twoyi">
                <!-- 分类 -->
                <div class="twoer">
                  <div class="twosan">
                    <h4>猫咪品种:</h4>
                    <div
                      class="twosi"
                      v-for="{ bid, type_id, breed_name } in petData"
                      :key="bid"
                    >
                      <!-- <a href="#">不限</a> -->
                      <a
                        href="#"
                        v-if="type_id == 2"
                        @click="name = breed_name"
                        >{{ breed_name }}</a
                      >
                    </div>
                  </div>
                  <div class="twowu" @click="ref">
                    <a style="color: rgb(255, 171, 79)">不限</a>
                  </div>
                  <hr class="twoliu" />
                  <div class="twoqi">
                    <h4>出售价格:</h4>
                    <div class="twoba">
                      <a
                        style="color: rgb(255, 171, 79); font-size: 16px"
                        @click="price"
                        >不限</a
                      >
                      <a @click="(min = 0), (max = 1000), getNum()"
                        >1000元以下</a
                      >
                      <a @click="(min = 1000), (max = 2000), getNum()"
                        >1000-2000元</a
                      >
                      <a @click="(min = 2000), (max = 3000), getNum()"
                        >2000-3000元</a
                      >
                      <a @click="(min = 3000), (max = 100000000), getNum()"
                        >3000元以上</a
                      >
                      <input type="text" value="0" /> -
                      <input type="text" value="0" />
                      <span>元</span>
                      <button @click="getNum">确定</button>
                    </div>
                  </div>
                </div>
                <!-- 图片列表 -->
                <el-row :gutter="20">
                  <el-col :span="6" v-for="(item, i) in list" :key="i">
                    <div class="twojiu">
                      <div class="twoshi">
                        <a href="#">
                          <img :src="`/img1/${item.pimg}`" />
                        </a>
                      </div>
                      <div class="twosyi">
                        <div class="twoser">
                          <h4>{{ item.pname }}</h4>
                          <span>{{ item.psex }}</span>
                        </div>
                        <p class="twossan">{{ item.pdescribe }}</p>
                        <div class="twossi">
                          <div class="twoswu">{{ item.pgrade }}</div>
                          <div class="twosliu">{{ item.pbirthday | date }}</div>
                          <div class="twosqi">
                            {{
                              item.pet_insect_repellent == 1
                                ? "已驱虫"
                                : "未驱虫"
                            }}
                          </div>
                        </div>
                        <div class="twoers">
                          <h3>￥{{ item.price }}</h3>
                          <span>精品精宠</span>
                        </div>
                      </div>
                    </div>
                  </el-col>
                </el-row>

                <!-- 页码 -->
                <ul class="three">
                  <li>&lt;</li>
                  <li>1</li>
                  <li>2</li>
                  <li>3</li>
                  <li>4</li>
                  <li>&gt;</li>
                </ul>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <!-- 用户评价 -->
        <el-tab-pane label="用户评价" name="second">
          <div class="four">
            <img src="../assets/img/head-pic1.png" />
            <div class="fouryi">
              <p>张杰</p>
              <p>2022/9/18</p>
              <p>用户默认好评</p>
            </div>
          </div>
          <div class="four">
            <img src="../assets/img/head-pic1.png" />
            <div class="fouryi">
              <p>张杰</p>
              <p>2022/9/18</p>
              <p>用户默认好评</p>
            </div>
          </div>
          <div class="four">
            <img src="../assets/img/head-pic1.png" />
            <div class="fouryi">
              <p>张杰</p>
              <p>2022/9/18</p>
              <p>用户默认好评</p>
            </div>
          </div>
          <div class="four">
            <img src="../assets/img/head-pic1.png" />
            <div class="fouryi">
              <p>张杰</p>
              <p>2022/9/18</p>
              <p>用户默认好评</p>
            </div>
          </div>
          <div class="four">
            <img src="../assets/img/head-pic1.png" />
            <div class="fouryi">
              <p>张杰</p>
              <p>2022/9/18</p>
              <p>用户默认好评</p>
            </div>
          </div>
          <div class="four">
            <img src="../assets/img/head-pic1.png" />
            <div class="fouryi">
              <p>张杰</p>
              <p>2022/9/18</p>
              <p>用户默认好评</p>
            </div>
          </div>
          <div class="four">
            <img src="../assets/img/head-pic1.png" />
            <div class="fouryi">
              <p>张杰</p>
              <p>2022/9/18</p>
              <p>用户默认好评</p>
            </div>
          </div>
          <div class="four">
            <img src="../assets/img/head-pic1.png" />
            <div class="fouryi">
              <p>张杰</p>
              <p>2022/9/18</p>
              <p>用户默认好评</p>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  filters: {
    date(value) {
      let now = Date.now();
      let d = new Date(value);
      let a = d.getTime();
      let c = now - a;
      let year = Math.floor(c / 31536000000);
      let month = Math.floor((c % 31536000000) / 2505600000);
      return `${year}岁${month}月`;
    },
  },
  data() {
    return {
      value: 3,
      activeName: "first",
      aName: "first",
      values: 4,
      headData: "",
      petData: "",
      max: "",
      min: "",
      name: "",
      typeid: 1,
      list: "",
    };
  },
  methods: {
    // 头部信息
    header() {
      let lid = this.$route.query.uid;
      let url = `/v1/user/information?lid=1`;
      this.axios.get(url).then((res) => {
        console.log(res);
        this.headData = res.data;
      });
    },
    // 宠物信息
    petName() {
      const url = "/v1/pro/breed";
      this.axios.get(url).then((res) => {
        console.log(res);
        this.petData = res.data;
      });
    },
    // 宠物列表
    petList() {
      let lid = this.$route.query.uid;
      console.log(lid);
      const url = "/v1/pro/price";
      let all = `min=${this.min}&max=${this.max}&name=${this.name}&typeid=${this.typeid}&uid=${lid}`;
      this.axios.post(url, all).then((res) => {
        console.log(this.typeid);
        this.list = res.data;
        console.log(res);
      });
    },

    // 价格
    getNum() {
      this.petList();
    },
    // 不限
    ref() {
      this.name = "";
      this.petList();
    },
    price() {
      (this.min = ""), (this.max = ""), this.petList();
    },
  },
  mounted() {
    this.header();
    this.petName();
    this.petList();
  },
  watch: {
    typeid(to, from) {
      (this.min = ""), (this.max = ""), (this.name = ""), this.petList();
    },
    name(to, from) {
      this.petList();
    },
  },
};
</script>

<style lang="scss" scoped></style>
<style src="../assets/css/store.css"></style>
